<script lang='ts' setup>
import { PropType, reactive, watch } from 'vue'
import { V2rayStreamSettings } from '@/apis/application/v2ray/structs.ts'

const emits = defineEmits(['update:stream'])
const props = defineProps({
  stream: { required: true, type: Object as PropType<V2rayStreamSettings> }
})

const state = reactive<{ stream: V2rayStreamSettings }>({ stream: props.stream! })

watch(state, function(_, n) {
  emits('update:stream', n.stream)
})
</script>

<template>
<n-space vertical>
  <n-divider>底层传输方式配置</n-divider>
  <div>
    <n-space :wrap-item='false' align='center'>
      <div>
        <n-space :wrap-item='false' align='center'>
          <div>启用底层传输配置</div>
          <n-switch v-model:value='state.stream.enable' size='small' />
        </n-space>
      </div>
      <div v-if='state.stream.enable' class='flex-max'>
        <n-space :wrap-item='false' align='center'>
          <div>选择协议类型</div>
          <div class='flex-max'>
            <n-select v-model:value='state.stream.network' :options='[{label: "TCP", value: "tcp"}, {label: "KCP", value: "kcp"}, {label: "Websocket", value: "ws"}, {label: "DomainSocket", value: "domainsocket"}, {label: "Quic", value: "quic"}]' class='width-max' size='small' />
          </div>
        </n-space>
      </div>
    </n-space>
  </div>
  <template v-if='state.stream.enable && "kcp" === state.stream.network'>
    <div>
      <n-space :wrap-item='false' align='center'>
        <div class='flex-1'>
          <n-input-group>
            <n-input-group-label size='small'>MTU</n-input-group-label>
            <n-input-number v-model:value='state.stream.kcp_settings.mtu' placeholder='MTU大小' size='small' />
          </n-input-group>
        </div>
        <div class='flex-1'>
          <n-input-group>
            <n-input-group-label size='small'>TTI</n-input-group-label>
            <n-input-number v-model:value='state.stream.kcp_settings.tti' placeholder='TTI大小' size='small' />
          </n-input-group>
        </div>
        <div class='flex-1'>
          <n-input-group>
            <n-input-group-label size='small'>读取缓冲区</n-input-group-label>
            <n-input-number v-model:value='state.stream.kcp_settings.read_buffer_size' placeholder='读取缓冲区大小' size='small' />
          </n-input-group>
        </div>
        <div class='flex-1'>
          <n-input-group>
            <n-input-group-label size='small'>写入缓冲区</n-input-group-label>
            <n-input-number v-model:value='state.stream.kcp_settings.write_buffer_size' placeholder='写入缓冲区大小' size='small' />
          </n-input-group>
        </div>
      </n-space>
    </div>
    <div>
      <n-space :wrap-item='false' align='center'>
        <div class='flex-max'>
          <n-input-group>
            <n-input-group-label size='small'>上行带宽</n-input-group-label>
            <n-input-number v-model:value='state.stream.kcp_settings.uplink_capacity' class='width-max' placeholder='上行带宽大小' size='small' />
          </n-input-group>
        </div>
        <div class='flex-max'>
          <n-input-group>
            <n-input-group-label size='small'>下行带宽</n-input-group-label>
            <n-input-number v-model:value='state.stream.kcp_settings.downlink_capacity' class='width-max' placeholder='下行带宽大小' size='small' />
          </n-input-group>
        </div>
        <div class='flex-1'>
          <n-space align='center'>
            <div>启用拥塞控制</div>
            <n-switch v-model:value='state.stream.kcp_settings.congestion' size='small' />
          </n-space>
        </div>
      </n-space>
    </div>
  </template>
  <template v-if='state.stream.enable && "ws" === state.stream.network'>
    <div>
      <n-input-group>
        <n-input-group-label size='small'>Websocket路径</n-input-group-label>
        <n-input v-model:value='state.stream.websocket_settings.path' placeholder='Websocket路径，默认为/' size='small' />
      </n-input-group>
    </div>
  </template>
  <template v-if='state.stream.enable && "domainsocket" === state.stream.network'>
    <div>
      <n-input-group>
        <n-input-group-label size='small'>路径</n-input-group-label>
        <n-input v-model:value='state.stream.domain_socket_settings.path' placeholder='路径不能为空且不能已存在' size='small' />
      </n-input-group>
    </div>
  </template>
  <template v-if='state.stream.enable && "quic" === state.stream.network'>
    <div>
      <n-space :wrap-item='false' align='center'>
        <div class='flex-max'>
          <n-space :wrap-item='false' align='center'>
            <div>加密方式</div>
            <div class='flex-max'>
              <n-select v-model:value='state.stream.quic_settings.security' :options='[{label: "none", value: "none"}, {label: "aes-128-gcm", value: "aes-128-gcm"}, {label: "chacha20-poly1305", value: "chacha20-poly1305"}]' size='small' />
            </div>
          </n-space>
        </div>
        <div class='flex-max'>
          <n-input-group>
            <n-input-group-label size='small'>秘钥</n-input-group-label>
            <n-input v-model:value='state.stream.quic_settings.key' class='width-max' placeholder='加密秘钥，加密方式为none时无效' size='small' />
          </n-input-group>
        </div>
      </n-space>
    </div>
  </template>
  <template v-if='state.stream.enable'>
    <n-divider>TLS安全配置</n-divider>
    <div>
      <n-space :wrap-item='false' align='center'>
        <div class='width-03'>
          <n-space :wrap-item='false' align='center'>
            <n-popover placement='right' trigger='hover'>
              <template #trigger>
                <div class='helper-text'>仅客户端有效</div>
              </template>
              <span>开启此设置时TLS的配置项将不在服务端生效，仅在生成客户端分享链接时有效</span>
            </n-popover>
            <n-switch v-model:value='state.stream.tls_settings.client_only' size='small'/>
            <div>传输方式</div>
            <div class='flex-max'>
              <n-select v-model:value='state.stream.tls_settings.security' :options='[{label: "none", value: "none"}, {label: "tls", value: "tls"}]' size='small' />
            </div>
          </n-space>
        </div>
        <div class='flex-max'>
          <n-input-group>
            <n-input-group-label size='small'>TLS证书域名</n-input-group-label>
            <n-input v-model:value='state.stream.tls_settings.server_name' class='width-max' placeholder='TLS证书使用的域名' size='small' />
          </n-input-group>
        </div>
      </n-space>
    </div>
  </template>
</n-space>
</template>

<style scoped>
.helper-text {
  border-bottom: 1px dashed #2E4053;
  cursor: help;
}
</style>
